<template>
    <el-card style="margin: 15px; min-height: calc(100vh - 80px)">
        <h2 style="color: black; font-size: 20px; font-family: '微软雅黑'; position: relative; top: 0px; right: 0px;">快速统计：</h2>
        <div>
            <el-row :gutter="20" class="topInfo">
                <el-col :span="6" @click="fetchTableData('tenant')">
                    <div id="tenant" class="el-colDiv">
                        <div id="ssv1-main-text" class="nowDiv">实时</div>
                        <span class="title">租客统计</span><br/>
                        <span class="digital">{{ this.Tenant }}</span><br/>
                        <span class="last-span">查询在库租客信息</span>
                    </div>
                </el-col>
                <el-col :span="6" @click="fetchTableData('landlord')">
                    <div id="landlord" class="el-colDiv">
                        <div id="ssv2-main-text" class="nowDiv">实时</div>
                        <span class="title">房东统计</span><br/>
                        <span class="digital">{{ this.Landlord }}</span><br/>
                        <span class="last-span">查询在库房东信息</span>
                    </div>
                </el-col>
                <el-col :span="6" @click="fetchTableData('house')">
                    <div id="house" class="el-colDiv">
                        <div id="ssv3-main-text" class="nowDiv">实时</div>
                        <span class="title">房源统计</span><br/>
                        <span class="digital">{{ this.House }}</span><br/>
                        <span class="last-span">监控房源信息</span>
                    </div>
                </el-col>
                <el-col :span="6" @click="createDataCharts()">
                    <div id="charts" class="el-colDiv">
                        <div id="ssv4-main-text" class="nowDiv">实时</div>
                        <span class="title">统计图表</span><br/>
                        <span class="digital">{{ this.House }}</span><br/>
                        <span class="last-span">可视化显示统计数据</span>
                    </div>
                </el-col>
            </el-row>
            
            <div v-if="currentTab !== 'charts'" style="margin-top: 0px;">
                <h3 v-if="currentTab === 'tenant'">租客列表</h3>
                <h3 v-if="currentTab === 'landlord'">房东列表</h3>
                <h3 v-if="currentTab === 'house'">房源列表</h3>

                <el-table :data="tableData" border stripe v-loading="loading" style="width: 100%; margin-top: 15px;">
                    
                    <el-table-column prop="username" label="用户名" v-if="currentTab !== 'house'"></el-table-column>
                    <el-table-column prop="phone" label="电话号码" v-if="currentTab !== 'house'"></el-table-column>
                    <el-table-column prop="email" label="邮箱" v-if="currentTab !== 'house'"></el-table-column>

                    <el-table-column prop="title" label="房屋名称" v-if="currentTab === 'house'"></el-table-column>
                    <el-table-column prop="description" label="房屋描述" v-if="currentTab === 'house'"></el-table-column>
                    <el-table-column prop="price" label="价格" v-if="currentTab === 'house'"></el-table-column>
                    <el-table-column prop="address" label="地址" v-if="currentTab === 'house'"></el-table-column>
                    <el-table-column prop="area" label="所在区域" v-if="currentTab === 'house'"></el-table-column>
                    <el-table-column prop="size" label="面积" v-if="currentTab === 'house'"></el-table-column>
                    <el-table-column prop="roomCount" label="房间号" v-if="currentTab === 'house'"></el-table-column>
                    <el-table-column prop="floor" label="楼层" v-if="currentTab === 'house'"></el-table-column>
                    <el-table-column prop="status" label="出租状态" v-if="currentTab === 'house'"></el-table-column>
                    
                </el-table>
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="allData.length"
                    :page-size="pageSize"
                    :page-sizes="[5,10,15]"
                    v-model="currentPage"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                    style="margin-top: 20px; text-align: center;"/>
            </div>
            <el-row :gutter="20" style="margin-top: 0px;">
                <h3 v-if="currentTab === 'charts'" style="position: relative; left: 10px;">图表统计</h3>
                <el-col :span="24">
                    <data-charts :charts="chartsOptions" v-if="showCharts" v-loading="loading"/>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script src="@/assets/js/AdminHome.js"></script>
<style scoped>@import '../assets/css/AdminHome.css';</style>
